import {ScrollView, View, Text, Image} from '@tarojs/components';
import React, {Component} from 'react';
import Taro, {getCurrentInstance} from '@tarojs/taro';
import {connect} from 'react-redux';
import './index.less';
import * as T from './types';
import actions from './actions';
import {store2Props} from './selectors';
import {AtIcon} from 'taro-ui';
import 'taro-ui/dist/style/components/icon.scss';
import CheckTab from './components/checkTab';
import MemberEquity from './components/memberEquity';
import MemberCard from './components/memberCard';
import MemberPay from './components/memberPay';
import MemberPrivilege from './components/memberPrivilege';
import ryutil from '@/libs/ryutil';
actions().actions.loadReducer();
// @ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class MemberOpen extends Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {
      navBarHeight: 0,
      navBarPadding: 0,
      pageHeight: 600,
      // navBarPaddingR: 0,
    };
  }

  componentDidMount() {
    this.getNavHeight();
    this.props.actions.init();
  }
  getNavHeight() {
    const menuButtonObject = Taro.getMenuButtonBoundingClientRect();
    const sysinfo = Taro.getSystemInfoSync();

    let menuBottonHeight = menuButtonObject.height;
    let navBarPadding = menuButtonObject.top;
    let navBarHeight = menuBottonHeight + navBarPadding + 14;
    // const navBarPaddingR = (sysinfo.windowWidth - (menuButtonObject.right - menuButtonObject.width)) * 2
    this.setState({
      navBarHeight,
      navBarPadding: navBarPadding,
      pageHeight: sysinfo.screenHeight - menuBottonHeight - navBarPadding,
      // navBarPaddingR,
    });
  }

  render() {
    return (
      <View className="memberOpen">
        <View
          style={{
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            paddingTop: `${this.state.navBarPadding}px`,
            minHeight: `${this.state.navBarHeight}px`,
            paddingBottom: '14px',
            position: 'sticky',
            top: 0,
            zIndex: 10,
            overflow: 'hidden',
          }}
        >
          <View className="memberOpen-bg"></View>
          <AtIcon
            onClick={() => {
              Taro.navigateBack();
            }}
            customStyle={{zIndex: 2}}
            value="chevron-left"
            size="30"
            color="#000"
          ></AtIcon>
          <View
            style={{
              fontSize: '36rpx',
              fontWeight: 500,
              color: '#333333',
              margin: '0 auto',
              zIndex: 2,
              transform: 'translateX(-36%)',
            }}
          >
            会员开通
          </View>
        </View>
        <View className="memberOpen-bg"></View>
        <ScrollView
          scrollY
          style={{height: `${this.state.pageHeight}px`, paddingBottom: '220rpx', background: '#FFFFFF'}}
        >
          <MemberCard />
          <CheckTab />
          <MemberEquity />
          <MemberPrivilege />
        </ScrollView>
        <MemberPay />
      </View>
    );
  }
}
